<template>
  <CesiumBox ref="cesiumbox"></CesiumBox>
</template>

<script setup>
import { ref, onMounted } from "vue";
import CesiumBox from "@/views/common/CesiumBox.vue";
import * as Cesium from "cesium";
import * as turf from "@turf/turf";
import Body from "../layout/Body.vue";

const cesiumbox = ref(null);
let cesium = null;

const computeCircle = (radius) => {
  const positions = [];
  for (let i = 0; i < 360; i++) {
    const radians = Cesium.Math.toRadians(i);
    positions.push(
      new Cesium.Cartesian2(
        radius * Math.cos(radians),
        radius * Math.sin(radians)
      )
    );
  }
  return positions;
};

let image = document.createElement("img");
image.src = "./test1.png";

Cesium.Material._materialCache.addMaterial("PolylineVolumeFlow", {
  fabric: {
    type: "PolylineVolumeFlow",
    uniforms: {
      image1: "czm_defaultImage",
      image2: "czm_defaultImage",
      length: 0,
      colorBasic: new Cesium.Color(0.0, 0.0, 0.0, 1.0),
      colorFlow: new Cesium.Color(1.0, 1.0, 1.0, 1.0),
    },
    source: `
      uniform float length;
      uniform vec4 colorBasic;
      uniform vec4 colorFlow;
      uniform sampler2D image1;
      uniform sampler2D image2;
      czm_material czm_getMaterial(czm_materialInput materialInput) {
        czm_material material = czm_getDefaultMaterial(materialInput);
        material.diffuse = colorBasic.rgb;
        material.alpha = colorBasic.a;
        vec2 st = materialInput.st;

        //vec4 test1 = texture(image1, st);
        //vec4 test2 = texture(image2, st);
        //if(test1.a != 0.0) {
        //  material.diffuse *= test1.rgb;
        //} else {
        //  material.diffuse *= test2.rgb;
        //}

        float per = fract(czm_frameNumber * 0.5 / length);
        float start = per;
        float end = per - 5.0 / length;
        if(st.x < start && st.x > end) {
          material.diffuse = colorFlow.rgb;
          material.alpha = colorFlow.a;
        }

        return material;
      }
    `,
  },
});

onMounted(() => {
  cesium = cesiumbox.value.box;
  cesium.viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(125.318557, 43.875326, 40000.0),
  });

  fetch(
    "http://localhost:8088/geoserver/threedimensional/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=threedimensional%3Acctrq_line&maxFeatures=1000&outputFormat=application%2Fjson"
  )
    .then((res) => {
      return res.json();
    })
    .then((json) => {
      for (let i = 0; i < json.features.length; i++) {
        let coor = json.features[i].geometry.coordinates;

        var start = turf.point(coor[0]);
        var end = turf.point(coor[1]);
        var distance = turf.distance(start, end);

        cesium.viewer.scene.primitives.add(
          new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
              geometry: new Cesium.PolylineVolumeGeometry({
                vertexFormat:
                  Cesium.MaterialAppearance.MaterialSupport.TEXTURED
                    .vertexFormat,
                polylinePositions: Cesium.Cartesian3.fromDegreesArray(
                  coor.flat()
                ),
                shapePositions: computeCircle(2.0),
              }),
            }),
            appearance: new Cesium.MaterialAppearance({
              material: Cesium.Material.fromType("PolylineVolumeFlow", {
                image1: "./test1.png",
                image2: "./test2.png",
                length: distance * 1000,
                colorBasic: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
                colorFlow: new Cesium.Color(0.0, 1.0, 0.0, 0.5),
              }),
              materialSupport:
                Cesium.MaterialAppearance.MaterialSupport.TEXTURED,
            }),
            asynchronous: false,
          })
        );
      }
    });
});
</script>
